<template>
  <div>
    <!-- 头部 -->
    <header>
      <b>菜单</b>
      <input type="text" placeholder="请搜索内容">
      <b @click="toLogin">登录</b>
    </header>
    <!-- 轮播 -->
    <div class="banner">
      <Banner :images="images"/>
    </div>
    <!-- 列表 -->
    <div class="list">
      <dl v-for="v in list" :key="v.id" @click="toDetail(v.id)">
        <dt><img :src="v.url" alt=""></dt>
        <dd>
          <h3>{{ v.title }}</h3>
          <h5>{{ v.price }}</h5>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
import Banner from '@/components/Banner'
import axios from 'axios'
export default {
  created() {
    axios.get('/list').then(resp => {
      this.list = resp.data.data
    })
  },
  methods: {
    toLogin() {
      this.$router.push({ name: 'login' })
    },
    toDetail(id) {
      // 跳转详情页 并且传递id
      // this.$router.push({ name: 'detail', params: { id: id  } })
      // 跳转详情页 并且传递id
      this.$router.push(`/detail/${id}`)
    }
  },
  components: {
    Banner
  },
  data() {
    return {
      images: [
        'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/63949/3/16783/295553/60fbffc3Ed0a51eb9/e8bef3ad7dca1332.jpg!cr_1125x449_0_166!q70.jpg.dpg',
        'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/184887/7/20714/177608/61235194Ef916d70d/581c73b705bf2946.jpg!cr_1053x420_4_0!q70.jpg.dpg',
        'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/172985/20/11254/250873/60ab712bE2cfd0e52/f184257039a404d1.png!cr_1053x420_4_0!q70.jpg.dpg',
        'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/63949/3/16783/295553/60fbffc3Ed0a51eb9/e8bef3ad7dca1332.jpg!cr_1125x449_0_166!q70.jpg.dpg'
      ],
      list: []
    }
  },
  
}
</script>

<style scoped lang='scss'>
header {
  width: 100% ;
  height: 36px;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  align-items: center;
  background: skyblue;
  color: #fff;
  input {
    flex: 1;
    margin: 0 10px;
    border-radius: 10px;
    height: 26px;
    border: 1px solid #ccc;
    outline: none;
    padding-left: 10px;
  }
}

.banner {
  padding: 6px;
  border-radius: 10px;
  overflow: hidden;
  height: 200px;
  width: 100%;
}

.list {
  display: flex;
  flex-wrap: wrap;
  dl {
    width: 50%;
    padding: 10px;
    text-align: center;
    flex-shrink: 0;
    img {
      width: 100%;
    }
  }
}
</style>